<extend name="Common/common"/>
<block name="main">
    <div class="P_con addDoctor">
        <div class="P_main bg_f">
            <dl>
                <dt>活动名称</dt>
                <dd><input type="text" placeholder="输入活动名称" id="activity_name"/></dd>
            </dl>
            <dl>
                <dt>活动地点</dt>
                <dd><input type="text" placeholder="输入活动地点" id="activity_place"/></dd>
            </dl>
            <dl>
                <dt>活动时间</dt>
                <dd>
                    <input type="text" id="activity_time" name="activity_time" placeholder="选择活动时间"/>
                </dd>
            </dl>
            <dl style="height:4rem;">
                <dt>活动要求</dt>
                <dd style="display: block;">
                    <textarea placeholder="输入活动要求" id="activity_require"></textarea>
                </dd>
            </dl>
            <dl>
                <dt>活动限额（人）</dt>
                <dd><input type="number" name="activity_limit" min="1"  placeholder="输入活动限额" id="activity_limit"/></dd>
            </dl>

            <dl style="height:8rem"><dt>活动封面</dt><dd>
            <div id="uploader-demo">
            <!--用来存放item-->
            <div id="fileList" class="uploader-list">

            </div>
            <input type="hidden" name="image" id="image" class="myimage">
            <div id="filePicker">选择图片</div>
            </div>
            </dd></dl>


            <div class="bBth blue"><a href="javascript:void(0)" id="sub">添加</a></div>
        </div>
    </div>
</block>
<block name="css">
    <link href="__JS__/mobiscroll/style/mobiscroll.2.13.2.css" rel="stylesheet" />
    <link type="text/css" href="__STATIC__/common/js/webuploader/webuploader.css" rel="stylesheet"/>
    <style type="text/css">
        .P_con.addPatient{ padding-bottom:3rem !important;}
        .webuploader-container {
            position: relative;
        }
        .webuploader-element-invisible {
            position: absolute !important;
            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip: rect(1px,1px,1px,1px);
        }
        .webuploader-pick {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background: #00b7ee;
            padding: 10px 15px;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            overflow: hidden;
        }
        .webuploader-pick-hover {
            background: #00a2d4;
        }

        .webuploader-pick-disable {
            opacity: 0.6;
            pointer-events:none;
        }
    </style>
</block>
<block name="js">
    <script type="text/javascript" src="__STATIC__/common/js/user.js"></script>
    <script src="__JS__/mobiscroll/script/mobiscroll.2.13.2.js"></script>
    <script type="text/javascript" src="__STATIC__/common/js/webuploader/webuploader.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $ = jQuery, $list = $('#fileList'),
            // 优化retina, 在retina下这个值是2
                    ratio = window.devicePixelRatio || 1,

            // 缩略图大小
                    thumbnailWidth = 50 * ratio, thumbnailHeight =50 * ratio,

            // Web Uploader实例
                    uploader;

            // 初始化Web Uploader
            uploader = WebUploader.create({
                auto: true,
                swf: '__STATIC__/common/js/webuploader/Uploader.swf',
                server: "{:U('/Doctor/Doctor/Upload/image')}",
                pick: {id:'#filePicker',multiple:false},
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,png',
                    mimeTypes: 'image/gif,image/jpg,image/jpeg,image/png'
                },
                fileNumLimit: 1,
                fileSingleSizeLimit: 6 * 1024 * 1024
            });

            // 当有文件添加进来的时候
            uploader.on('fileQueued', function(file) {
                var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
                        + '<img>' + '<div class="info">' + file.name + '</div>'
                        + '</div>'), $img = $li.find('img');

                $list.html($li);

                // 创建缩略图
                uploader.makeThumb(file, function(error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });

            //局部设置，给每个独立的文件上传请求参数设置，每次发送都会发送此对象中的参数。。参考：https://github.com/fex-team/webuploader/issues/145
            uploader.on('uploadBeforeSend', function( block, data, headers) {
                data.key = new Date().toLocaleTimeString();
            });

            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function(file, percentage) {
                var $li = $('#' + file.id), $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('').appendTo($li)
                            .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function(file,data) {
                $('.myimage').val(data.msg);
                $('#' + file.id).addClass('upload-state-done');
            });

            // 文件上传失败，现实上传出错。
            uploader.on('uploadError', function(file) {
                var $li = $('#' + file.id), $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function(file) {
                $('#' + file.id).find('.progress').remove();
            });

            uploader.on('uploadAccept', function(file, response) {
                console.log($('#' + file.id).html());
                if (response.code == 1) {
                    // 通过return false来告诉组件，此文件上传有错。
                    return false;
                }
            });

            // 先从文件队列中移除之前上传的图片，第一次上传则跳过
            $("#filePicker").on('click', function () {
                if (!WebUploader.Uploader.support()) {
                    var error = "上传控件不支持您的浏览器！请尝试升级flash版本或者使用Chrome引擎的浏览器。<a target='_blank' href='http://se.360.cn'>下载页面</a>";
                    console.log(error);
                    return;
                }

                var id = $list.find("div").attr("id");
                if (undefined != id) {
                    uploader.removeFile(uploader.getFile(id));
                }
            });
           //选择时间
            var opt = {
                theme: 'default',
                display: 'bottom',
                mode: 'scroller',
                animate: 'pop',
                dateFormat: 'yy-mm-dd',
                dateOrder: 'yymmdd',
                onSelect:function(valueText){
                    //获取当前时间的数量
                    $('#activity_time').val(valueText);
                    return false;
                }
            };
            $('#activity_time').scroller().date(opt);


            var issend = false;
            $('#sub').click(function(){
                if(issend) return false;
                issend = true;
                var activity_name = $('#activity_name').val();
                var activity_place =$('#activity_place').val();
                var activity_time =$('#activity_time').val();
                var activity_require =$('#activity_require').val();
                var activity_limit =$('#activity_limit').val();
                var image=$('#image').val();
                //验证名字
                if(!activity_name){
                    issend = false;
                    layer_msg('请填写活动名称');
                    return false;
                }
                if(!activity_place){
                    issend = false;
                    layer_msg('请填写活动地点');
                    return false;
                }
                if(!activity_time){
                    issend = false;
                    layer_msg('请填写活动时间');
                    return false;
                }
                if(!activity_require){
                    issend = false;
                    layer_msg('请填写活动要求');
                    return false;
                }
                if(!activity_limit){
                    issend = false;
                    layer_msg('请填写活动限额');
                    return false;
                }
                //提交数据
                $.post(location.href,{activity_name:activity_name,activity_place:activity_place,activity_time:activity_time,activity_require:activity_require,activity_limit:activity_limit,image:image},function (data){
                    issend = false;
                    if(data.code==0){
                        layer_msg('添加成功',2,function(){
                            location.href = data.url;
                        });
                    }else{
                        layer_msg(data.msg);
                    }
                },'json');
            });


        });
    </script>
</block>